<template>
  <div>
    <el-dialog :title="title" :close-on-click-modal="false" :visible.sync="visible">
      <el-form :model="inputForm" ref="inputForm" v-loading="loading" :class="method === 'view' ? 'readonly' : ''"
        :disabled="method === 'view'" label-width="120px">
        <el-row :gutter="15">
          <el-col :span="12">
            <el-form-item label="设施名称" prop="name" :rules="[
                  {required: true, message:'设施名称不能为空', trigger:'blur'}
                 ]">
              <el-input v-model="inputForm.name" placeholder="请填写设施名称">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="工作状态" prop="elevatorStatus" :rules="[
                  {required: true, message:'工作状态不能为空', trigger:'blur'}
                 ]">
              <el-select v-model="inputForm.elevatorStatus" placeholder="请选择" style="width: 100%;">
                <el-option v-for="item in $dictUtils.getDictList('elevator_status')" :key="item.value"
                  :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="开始时间" prop="startTime" :rules="[]">
              <el-time-select v-model="inputForm.startTime" :picker-options="{
                  start: '00:30',
                  step: '00:15',
                  end: '23:45'
                }" placeholder="选择时间"></el-time-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="结束时间" prop="endTime" :rules="[]">
              <el-time-select v-model="inputForm.endTime" :picker-options="{
                  start: '00:30',
                  step: '00:15',
                  end: '23:45'
                }" placeholder="选择时间"></el-time-select>
            </el-form-item>
          </el-col>
          <el-col :span="12"  v-if="inputForm.utilitiesType.species === '0' ||inputForm.utilitiesType.species === '1' ||inputForm.utilitiesType.species === '2' || inputForm.utilitiesType.species === '5'  || inputForm.utilitiesType.species === '6'">
            <el-form-item label="通行消耗" prop="cost" :rules="[
                  {required: true, message:'通行消耗不能为空', trigger:'blur'}
                 ]">
              <el-input v-model="inputForm.cost" placeholder="通过此设施所效果的地图距离">
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12"
            v-if="inputForm.utilitiesType.species === '0' || inputForm.utilitiesType.species === '5'  || inputForm.utilitiesType.species === '6'">
            <el-form-item label="通行方式" prop="passType" :rules="[]">
              <el-select v-model="inputForm.passType" placeholder="请选择通行方式" style="width: 100%;">
                <el-option v-for="item in $dictUtils.getDictList('pass_type')" :key="item.value" :label="item.label"
                  :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24"
            v-if="this.inputForm.utilitiesType.species === '0' || this.inputForm.utilitiesType.species === '2' || this.inputForm.utilitiesType.species === '5' || inputForm.utilitiesType.species === '6'">
            <el-form-item label="标点模式" prop="setType" :rules="[]">
              <el-radio-group v-model="inputForm.setType">
                <el-radio v-for="item in setTypeList" :label="item.id" :key="item.id">{{ item.name }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="buildingList.length > 0 && inputForm.setType === '0'">
            <el-form-item label="选择楼宇" prop="buildingId" :rules="[]">
              <el-select v-model="buildingId" placeholder="请选择楼宇" style="width: 100%;">
                <el-option v-for="item in buildingList" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="buildingList.length > 0 && inputForm.setType === '1'">
            <el-form-item label="起始楼宇" prop="buildingId" :rules="[]">
              <el-select v-model="start.buildingId" placeholder="请选择楼宇" style="width: 100%;"
                @change="buildingStartChange">
                <el-option v-for="item in buildingList" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="buildingList.length > 0 && inputForm.setType === '1'">
            <el-form-item label="到达楼宇" prop="buildingId" :rules="[]">
              <el-select v-model="end.buildingId" placeholder="请选择楼宇" style="width: 100%;"
                @change="buildingEndChange">
                <el-option v-for="item in buildingList" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="inputForm.setType === '1'">
            <el-form-item label="起始楼层" prop="floorId" :rules="[]">
              <el-select v-model="start.floorId" placeholder="请选择" style="width: 100%;">
                <el-option v-for="item in floorListInStartBuilding" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="inputForm.setType === '1'">
            <el-form-item label="到达楼层" prop="floorId" :rules="[]">
              <el-select v-model="end.floorId" placeholder="请选择" style="width: 100%;">
                <el-option v-for="item in floorListInEndBuilding" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="isChannel && inputForm.setType === '0'">
            <el-form-item label="可达楼层" prop="floors" :rules="[
                  ]">
              <el-checkbox-group v-model="floors">
                <el-checkbox v-for="item in floorListInBuilding" :label="item.id" :key="item.id">{{item.name}}
                </el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
          <el-col :span="24" v-else-if="!isChannel && inputForm.setType === '0'">
            <el-form-item label="所在楼层" prop="floor" :rules="[
                  ]">
              <el-radio-group v-model="floor">
                <el-radio v-for="item in floorListInBuilding" :label="item.id" :key="item.id">{{item.name}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="inputForm.setType === '1'? 12 : 24" style="height: 400px;">
            <select-point ref="startPoint" @onMapClick="onMapStartClick"></select-point>
          </el-col>
          <el-col :span="12" style="height: 400px;" v-show="inputForm.setType === '1'">
            <select-point ref="endPoint" @onMapClick="onMapEndClick"></select-point>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false">关闭</el-button>
        <el-button type="primary" v-if="method != 'view'" @click="doSubmit()" v-noMoreClick>确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  // import SelectTree from '@/components/treeSelect/treeSelect.vue'
  import SelectPoint from '@/components/jfMap/selectPoint.vue';
  export default {
    data() {
      return {
        title: '',
        method: '',
        visible: false,
        loading: false,
        buildingId: '',
        setTypeList: [{
            name: '简洁模式',
            id: '0'
          },
          {
            name: '横跨模式',
            id: '1'
          }
        ],
        floor: '', // 单点选择的时候用到
        floors: [], // 多楼层选择的时候用到
        start: {
          buildingId: '',
          floorId: '',
          x: '',
          y: ''
        },
        end: {
          buildingId: '',
          floorId: '',
          x: '',
          y: ''
        },
        inputForm: {
          id: '',
          name: '',
          setType: '0',
          utilitiesType: {
            id: '',
            species: ''
          },
          cost: '788', // 实际距离20米
          passType: '',
          startTime: '',
          endTime: '',
          elevatorStatus: '',
          nameAbbreviation: '',
          jfUtilitiesPlaceList: []
        }
      };
    },
    components: {
      SelectPoint
    },
    computed: {
      buildingList: {
        get() {
          return this.$store.state.shopdata.buildingList
        }
      },
      floorList: {
        get() {
          return this.$store.state.shopdata.floorList
        }
      },
      isChannel(val) {
        if (
          this.inputForm.utilitiesType.species === '0' ||
          this.inputForm.utilitiesType.species === '1' ||
          this.inputForm.utilitiesType.species === '2' ||
          this.inputForm.utilitiesType.species === '5' ||
          this.inputForm.utilitiesType.species === '6'
        ) {
          return true;
        }
        return false;
      },
      floorListInBuilding: {
        get() {
          if (this.buildingId === undefined || this.buildingId === '') {
            return this.floorList
          }
          return this.floorList.filter((floor) => {
            return floor.buildingId === this.buildingId
          })
        }
      },
      floorListInStartBuilding: {
        get() {
          if (this.start.buildingId === undefined || this.start.buildingId === '') {
            return this.floorList
          }
          return this.floorList.filter((floor) => {
            return floor.buildingId === this.start.buildingId
          })
        }
      },
      floorListInEndBuilding: {
        get() {
          if (this.end.buildingId === undefined || this.end.buildingId === '') {
            return this.floorList
          }
          return this.floorList.filter((floor) => {
            return floor.buildingId === this.end.buildingId
          })
        }
      }
    },
    watch: {
      floors(val) {
        if (val.length === 0) {
          this.$refs.startPoint.showFloor(null);
          this.$refs.startPoint.removeMarkPoint();
        } else {
          this.$refs.startPoint.showFloorAndMarkPoint(val[val.length - 1], this.start.x, this.start.y, this.start.z || 0);
        }
      },
      floor(val) {
        this.$refs.startPoint.showFloorAndMarkPoint(val, this.start.x, this.start.y, this.start.z || 0);
      },
      'inputForm.setType'(val) {
        if (this.$refs.startPoint) {
          this.$refs.startPoint.resize();
        }
        if (this.$refs.endPoint) {
          this.$refs.endPoint.resize();
        }
      },
      'start.floorId'(val) {
        this.$refs.startPoint.showFloorAndMarkPoint(val, this.start.x, this.start.y, this.start.z || 0);
      },
      'end.floorId'(val) {
        this.$refs.endPoint.showFloorAndMarkPoint(val, this.end.x, this.end.y, this.end.z || 0);
      },
      // 'start.buildingId'() {
      //   this.start.floorId = null
      //   this.$refs.startPoint.showFloor(null);
      // },
      // 'end.buildingId'() {
      //   this.end.floorId = null
      //   this.$refs.endPoint.showFloor(null);
      // },
    },
    methods: {

      init(method, id, utilitiesTypeId, utilitiesTypeSpecies) {
        this.method = method;
        this.inputForm.id = id;
        if (method === 'add') {
          this.title = `新建公共设施`;
        } else if (method === 'edit') {
          this.title = '修改公共设施';
        } else if (method === 'view') {
          this.title = '查看公共设施';
        }
        this.visible = true;
        this.loading = false;
        this.$nextTick(() => {
          this.$refs.inputForm.resetFields();
          this.inputForm.utilitiesType.id = utilitiesTypeId;
          this.inputForm.utilitiesType.species = utilitiesTypeSpecies;
          this.inputForm.setType = '0'
          this.inputForm.elevatorStatus = '0'
          this.inputForm.cost = '788'
          this.floor = '';
          this.floors = [];
          this.start.floorId = ''
          this.start.x = ''
          this.start.y = ''
          this.start.buildingId = ''
          this.end.floorId = ''
          this.end.x = ''
          this.end.y = ''
          this.end.buildingId = ''
          this.buildingId = ''
          if (method === 'edit' || method === 'view') {
            // 修改或者查看
            this.loading = true;
            this.$http({
              url: `/smis/utilities/jfUtilities/queryById?id=${this.inputForm.id}`,
              method: 'get'
            }).then(({
              data
            }) => {
              this.inputForm = this.recover(this.inputForm, data.jfUtilities);
              if (this.inputForm.jfUtilitiesPlaceList && this.inputForm.jfUtilitiesPlaceList.length > 0) {
                if (this.inputForm.jfUtilitiesPlaceList.length === 1) {
                  this.floor = this.inputForm.jfUtilitiesPlaceList[0].floorId;
                } else if (this.inputForm.jfUtilitiesPlaceList.length > 1) {
                  this.inputForm.jfUtilitiesPlaceList.forEach(item => {
                    this.floors.push(item.floorId);
                  });
                }

                this.start.floorId = this.inputForm.jfUtilitiesPlaceList[0].floorId;
                this.start.buildingId = this.inputForm.jfUtilitiesPlaceList[0].buildingId;
                this.start.x = this.inputForm.jfUtilitiesPlaceList[0].x;
                this.start.y = this.inputForm.jfUtilitiesPlaceList[0].y;
                this.end.floorId = this.inputForm.jfUtilitiesPlaceList[0].floorId;
                this.end.buildingId = this.inputForm.jfUtilitiesPlaceList[0].buildingId;
                this.end.x = this.inputForm.jfUtilitiesPlaceList[0].x;
                this.end.y = this.inputForm.jfUtilitiesPlaceList[0].y;
                this.buildingId = this.inputForm.jfUtilitiesPlaceList[0].buildingId;
                if (this.inputForm.jfUtilitiesPlaceList.length > 1) {
                  this.end.floorId = this.inputForm.jfUtilitiesPlaceList[1].floorId;
                  this.end.buildingId = this.inputForm.jfUtilitiesPlaceList[1].buildingId;
                  this.end.x = this.inputForm.jfUtilitiesPlaceList[1].x;
                  this.end.y = this.inputForm.jfUtilitiesPlaceList[1].y;
                }

              }
              this.loading = false;
            });
          }
          if (this.$refs.selectPoint) {
            this.$refs.selectPoint.resize();
          }
        });
      },
      buildingStartChange(e) {
        // console.log(e)
        this.start.floorId = null
        // this.$refs.startPoint.showFloor(null);
      },
      buildingEndChange(e) {
        // console.log(e)
        this.end.floorId = null
        // this.$refs.startPoint.showFloor(null);
      },
      onMapStartClick(e) {
        this.start.x = e.x;
        this.start.y = e.y;
		this.start.z = e.z;
      },
      onMapEndClick(e) {
        this.end.x = e.x;
        this.end.y = e.y;
		this.end.z = e.z;
      },
      // 表单提交
      doSubmit() {
        this.$refs['inputForm'].validate(valid => {
          if (valid) {
            if (this.inputForm.setType === '0') {
              if (this.floor === '' && this.floors.length === 0) {
                this.$message.error('请选择所在楼层');
                return;
              }
              if (this.floor === '' && this.floors.length === 1) {
                this.$message.error('至少选择两个楼层');
                return;
              }
              if (this.start.y === '' || this.start.x === '' || this.start.x === 0 || this.start.y === 0) {
                this.$message.error('请在地图上点击设施所在位置');
                return;
              }
              if (this.floor !== '') {
                this.inputForm.jfUtilitiesPlaceList = [{
                  floorId: this.floor,
                  x: parseFloat(this.start.x),
                  y: parseFloat(this.start.y)
                }];
              }
              if (this.floors.length !== 0) {
                this.inputForm.jfUtilitiesPlaceList = [];
                this.floors.forEach(f => {
                  var exist = false
                  for (var i = 0; i < this.floorListInBuilding.length; i++) {
                    if (f === this.floorListInBuilding[i].id) {
                      exist = true
                      break
                    }
                  }
                  if (exist) {
                    this.inputForm.jfUtilitiesPlaceList.push({
                      floorId: f,
                      x: parseFloat(this.start.x),
                      y: parseFloat(this.start.y)
                    });
                  }
                });
              }
            } else if (this.inputForm.setType === '1') {
              if (this.end.y === '' || this.end.x === '' || this.end.x === 0 || this.end.y === 0) {
                this.$message.error('请在到达楼层上点击设施所在位置');
                return;
              }
              this.inputForm.jfUtilitiesPlaceList = [this.start, this.end];
            }
            if (this.inputForm.utilitiesType.species !== '0' && this.inputForm.utilitiesType.species !== '5' && this
              .inputForm.utilitiesType.species !== '6') {
              this.inputForm.passType = '0'
            }
            this.loading = true;
            this.$http({
              url: `/smis/utilities/jfUtilities/save`,
              method: 'post',
              data: this.inputForm
            }).then(({
              data
            }) => {
              if (data && data.success) {
                this.visible = false;
                this.$message.success(data.msg);
                this.$emit('refreshDataList');
              }
              this.loading = false;
            });
          }
        });
      }
    }
  };
</script>
